<template>
    <div>
        <el-button class="header-custom-btn" :class=" { 'transparent' : transparent }" v-if="!isLogin"
            @click="$store.dispatch('showAuthModal', 'login')">用户登录</el-button>
        <div class="user-info" v-else>
            <span @click="$router.push('/user/profile')">
                <el-avatar :src="userInfo.avatar"></el-avatar>
            </span>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link" @click="$router.push('/user/profile')">
                    {{ userInfo.nickname }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="profile">
                        <icon-svg iconClass="#icon-a-zu234"></icon-svg>
                        用户主页
                    </el-dropdown-item>
                    <el-dropdown-item command="publish">
                        <icon-svg iconClass="#icon-a-zu266"></icon-svg>
                        我的发布
                    </el-dropdown-item>
                    <el-dropdown-item command="message">
                        <icon-svg iconClass="#icon-a-zu274"></icon-svg>
                        我的信息
                    </el-dropdown-item>
                    <el-dropdown-item command="orders">
                        <icon-svg iconClass="#icon-a-zu12807"></icon-svg>
                        我的订单
                    </el-dropdown-item>
                    <el-dropdown-item command="logout" divided>
                        <icon-svg iconClass="#icon-a-zu12806"></icon-svg>
                        退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex'
export default {
    components: {},
    props: {
        transparent: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {

        }
    },
    computed: {
        ...mapGetters(['isLogin', 'userInfo'])
    },
    methods: {
        ...mapActions(["logout"]),
        handleCommand (command) {
            switch (command) {
                case 'profile':
                    this.$router.push('/user/profile')
                    break
                case 'publish':
                    this.$router.push('/user/publish')
                    break
                case 'message':
                    this.$router.push('/user/message')
                    break
                case 'orders':
                    this.$router.push('/user/orders')
                    break
                case 'logout':
                    this.confirmLogOut()
                    break
            }
        },
        confirmLogOut () {
            let that = this
            that.$confirm('确认退出登录吗？')
                .then(_ => {
                    that.logout()
                    that.$router.push('/')
                })

        }
    },
}
</script>

<style scoped lang="less">
.user-info {
    display: flex;
    align-items: center;
    .el-avatar {
        margin-right: 10px;
    }
    .el-dropdown-link {
        color: #fff;
        cursor: pointer;
    }
}
.transparent {
    color: #fff;
    font-size: 1rem;
    border-color: transparent;
    background-color: transparent;

    a {
        color: initial;
        text-decoration: none;
    }

    &:focus,
    &:hover {
        background: #EF312A;
        border-color: #EF312A;
        color: #FFF;

        a {
            color: #FFF;
        }
    }
}
</style>